<template>
  <div class="event-assign-info-container">
    <div class="event-assign-info-type">
      <el-radio-group v-model="eventAssignIsAuto" @change="eventAssignRadioChange">
        <el-radio :label="false" >{{$t('event.edit.text2')}}</el-radio>
        <el-radio :label="true">{{$t('common.event.actionStatus.autoDispatch')}}</el-radio>
      </el-radio-group>
    </div>
    <p v-if="!eventAssignIsAuto" @click="checkDept(0)" class="p-input">
      <span class="placeholder-text" v-if="!executorId">
        {{$t('smartPlan.selectEventExecutor')}}
      </span>
      <template v-if="isOpenData">
        <open-data type="userName" :openid="executor.staffId"></open-data>
      </template>
      <template v-else>
        {{executorName}}
      </template>
      <el-button type="primary" @click="executorMySelf">{{$t('event.edit.text3')}}</el-button>
    </p>
    <p @click="checkDept(1)" class="p-input">
      <span class="placeholder-text" v-if="synergies.length <= 0">
        {{$t('smartPlan.selectEventSynergies')}}
      </span>
      <template v-if="isOpenData && synergies && synergies.length">
        <open-data
          v-for="item in synergies"
          :key="item.staffId"
          type="userName"
          :openid="item.staffId"></open-data>
      </template>
      <template v-else>
        {{synergiesNames}}
      </template>
    </p>
  </div>
</template>

<script>
import { BaseSelectUserModeEnum } from '@src/component/common/BaseSelectUser/model/enum'
import { chooseExUser } from '@model/config/SelectUserConfig.ts'
import { isEmpty } from 'pub-bbx-utils';
import { getRootWindowInitData } from '@src/util/window'
const rootWindowInitData = getRootWindowInitData()

export default {
  name: 'event-assign-info',
  props: {
    eventConfig: {
      type: Object,
      default: () => ({})
    },
    editValue: {
      type: Object,
      default: () => ({})
    },
  },
  data() {
    return {
      eventAssignForm: {},
      eventAssignIsAuto: false, // 单选项是否自动分配
      synergies: [],
      synergiesNames: '',
      executor: {},
      executorId: '',
      executorName: '',
    }
  },
  computed: {
    /** 事件分配信息规则*/
    assignRules() {
      return this.isEventExecutorUser ? ({}) : ({
        executorName: [
          { required: true, message: this.$t('event.edit.text7'), trigger: 'blur' },
        ],
      });
    },
    showEventAllotInformation() {
      return true
    },
    // 允许新建事件时不指派负责人
    isEventExecutorUser() {
      return this.eventConfig?.eventExecutorUser || false
    },
    isAuto() {
      return this.eventConfig?.autoDispatchEnabled || false
    },
    currentUser() {
      return rootWindowInitData?.user
    },
    currentUserId() {
      return rootWindowInitData?.user?.userId || ''
    },
    currentUserName() {
      return rootWindowInitData?.user?.displayName || ''
    },
  },
  watch: {
    editValue: {
      deep: true,
      immediate: true,
      handler(newValue) {
        if (!isEmpty(newValue)) {
          this.eventAssignIsAuto = newValue.eventAssignIsAuto
          this.executorId = newValue.executorId
          this.executorName = newValue.executorName
          this.synergies = newValue.synergies || []
          this.synergiesNames = this.synergies.map(item => item.displayName).join(',')
        }
      }
    },
  },
  methods: {
    eventAssignRadioChange(isAuto) {
      if(isAuto) {
        this.executorId = 'auto'
        this.executorName = ''
      } else {
        this.executorId = ''
        this.executorName = ''
      }
      this.$set(this.eventAssignForm, 'executorName', this.executorName)
    },
    // 负责人选择我自己
    executorMySelf(event) {
      event.stopPropagation()
      this.executor = this.currentUser;
      this.executorId = this.currentUserId;
      this.executorName = this.currentUserName;
      this.$set(this.eventAssignForm, 'executorName', this.currentUserName)
    },
    /**
     * @description 选择负责人和协同人
     */
    checkDept(type = 0) {
      // type 1协同人 0 负责人
      let option = {
        title: type ? this.$t('event.edit.text8') : this.$t('event.edit.text9'), // [选填] 默认值为 '请选择人员'
        ...(type ? {max:100} : {max:1}),
        ...chooseExUser,
        mode: BaseSelectUserModeEnum.Filter
      };
      option.seeAllOrg = true
      // 设置可以删除已经选择的人,组件内部传入selected
      option.selectedUsers = type == 0 ? this.executor : this.synergies
      // 过滤没有角色的用户
      option.haveRole = true
      if(this.showEventAllotInformation) {
        option.authKey = 'CASE_ALLOT';
      }
      this.$fast.select.multi.all(option).then(({ data, status }) => {
        if (!status) {
          if (type) {
            this.synergies = data.users || [];
            this.synergiesNames = this.synergies.map(item => item.displayName).join(',')
          } else {
            const { userId, displayName } = data.users[0];
            this.executor = data.users[0];
            this.executorId = userId;
            this.executorName = displayName;
            this.$set(this.eventAssignForm, 'executorName', displayName)
          }
        }
      });
    },
  }
}
</script>

<style lang="scss" scoped>
.event-assign-info-container {
  background: #fff;
  overflow: hidden;
  padding: 20px 0;
  .event-assign-info-type {
    display: flex;
    margin-bottom: 10px;
  }
  .p-input {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid #e0e1e2;
    border-radius: 4px;
    padding: 0 10px;
    min-height: 32px;
    line-height: 30px;
    margin: 5px 0;
    position: relative;
    .placeholder-text {
      color: rgb(193, 196, 203) !important;
      font-size: 13px !important;
      padding: 0 10px !important;
      padding: 0 !important;
    }
    ::v-deep .el-button {
      position: absolute;
      right: 0;
      height: 30px;
    }
  }
}
</style>